<script setup lang="ts">
    import Write from './components/Write.vue'
    import { ContentDetailWrap } from '@/components/ContentDetailWrap'
    import { ref, unref } from 'vue'
    import { ElButton } from 'element-plus'
    import { useI18n } from '@/hooks/web/useI18n'
    import { useRouter } from 'vue-router'
    import { getAddViewApi } from '@/api/table'
    import { TableData } from '@/api/table/types'
    import { useEmitt } from '@/hooks/web/useEmitt'

    const { emitter } = useEmitt()

    const { push } = useRouter()

    const { t } = useI18n()

    const writeRef = ref<ComponentRef<typeof Write>>()

    const loading = ref(false)

    const save = async () => {
        const write = unref(writeRef)
        await write?.elFormRef?.validate(async (isValid) => {
            if (isValid) {
                loading.value = true
                const data = (await write?.getFormData()) as TableData
                const res = await getAddViewApi(data)
                    .catch(() => {})
                    .finally(() => {
                        loading.value = false
                    })
                if (res) {
                    emitter.emit('getList', 'add')
                     push('carousel-ChartList')
                }
            }
        })
    }
</script>

<template>
    <ContentDetailWrap :title="t('exampleDemo.add')" @back="push('/example/example-page1')">
        <Write ref="writeRef" />

        <template #right>
            <ElButton type="primary" :loading="loading" @click="save">
                {{ t('exampleDemo.save') }}
            </ElButton>
        </template>
    </ContentDetailWrap>
</template>
